<template>
  <div class="charge">
    <div class="charge-head">
      <div class="charge-btns">
        <el-button-group>
        <el-button class="btn-5" :class="{'active': isActive === 'Bill'}" @click="getBillRecords('Bill')" v-jurisdiction="'customer:order:list'">账单记录</el-button>
        <el-button class="btn-5" :class="{'active': isActive === 'Order'}" @click="getOrderRecords('Order')" v-jurisdiction="'order:info:customer:list'" >订单记录</el-button>
        <el-button class="btn-5" :class="{'active': isActive === 'Payment'}" @click="getPaymentRecords('Payment')" v-jurisdiction="'customer:pay:log:list'">支付记录</el-button>
        <el-button class="btn-5" :class="{'active': isActive === 'Arrears'}" @click="getArrears('Arrears')">收费</el-button>
        </el-button-group>
      </div>
      <!-- <div class="charge-seach" v-if="isActive !== 'Arrears'">
        <div class="seach-lable">按预约状态筛选</div>
          <div class="check-g">
            <el-checkbox-group v-model="checkStatus">
              <el-checkbox label="1">结算</el-checkbox>
              <el-checkbox label="2">退费</el-checkbox>
              <el-checkbox label="3">作废</el-checkbox>
              <el-checkbox label="4">欠费</el-checkbox>
            </el-checkbox-group>
          </div>
      </div> -->
      <div class="right-btns">
        
        
      </div>
    </div>
    
    <div class="charge-content" v-loading="loading">
      <div class="content-top" v-if="isActive === 'Bill'">
        <div class="charge-info">
          <div class="info-title">消费概念</div>
          <div class="info">
            <div class="info-1">
              <div>开单应收</div>
              <div>{{orderSumMoney}}</div>
            </div>
            <div class="info-1">
              <div>消费总额</div>
              <div>{{paySumMoney}}</div>
            </div>
            <div class="info-1">
              <div>欠费</div>
              <div class="arrears-num">{{amountOwed}}</div>
            </div>
          </div>
        </div>
        <div class="charge-info">
          <div class="info-title">账户余额</div>
          <div class="info">
            <div class="info-1">
              <div>存储卡</div>
              <div>{{balance}}</div>
            </div>
            <div class="info-1">
              <div>积分</div>
              <div>{{integral}}</div>
            </div>
          </div>
        </div>
        <div class="charge-info">
          <div class="info-title">积分</div>
          <div class="info">
            <div class="info-1">
              <div>套餐券</div>
              <div>{{couponsPackageCount}}</div>
            </div>
            <div class="info-1">
              <div>现金券</div>
              <div>{{couponsCashCount}}</div>
            </div>
            <div class="info-1">
              <div>折扣券</div>
              <div>{{couponsDiscountCount}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 账单记录 -->
      
      <div class="content-table" v-if="isActive === 'Bill'">
        <ztable 
          :tableData='data'
          :data="tableData" 
          
          :strucs='columns'
          :columns='strucs'
          
          :height="'100%'"
          :border="false"
          :isShow="true"
          type='expand'
          @handleExpandChange="handleExpandChange"
          :isshowOperation="true"
        >
        <template #default="slotData">
          <!-- <el-button type="text" size="small" class="operation" v-jurisdiction="'customer:order:copy'">复制</el-button> -->
          <el-button 
            type="text" 
            size="small" 
            class="operation" 
            v-jurisdiction="'customer:order:update'"
            @click="handleEditItem(slotData.rowData)"
            >编辑</el-button>
          <el-button type="text" size="small" class="operation" @click="handleOrderPrint(slotData.rowData)" >打印</el-button>
          
          <el-button 
              type="text" size="small" 
              class="operation" v-jurisdiction="'customer:order:refund'"
              v-if="slotData.rowData.status != '欠款'"
              @click="handleRefundItem(slotData.rowData)"
              >退费</el-button>
          <!-- <el-button 
            type="text" size="small" 
            class="operation" v-jurisdiction="'customer:order:cancel'"
            v-if="slotData.rowData.status === '欠款' || slotData.rowData.status === '完成'"
            >作废</el-button> -->
            <el-button 
            type="text" size="small" 
            class="operation"
            @click="handleDeleteItem(slotData.rowData)"
            v-jurisdiction="'customer:order:del'"
            >删除</el-button>
        </template>
        <template #insideBtn="scope">
          <el-button type="text" size="small" class="operation" @click="handleInsideEditItem(scope.insideData)" >编辑</el-button>
          <el-button type="text" size="small" class="operation" @click="handlePrint(scope.insideData)">打印</el-button>
          
        </template>
        </ztable>
      </div>
      <!-- 订单记录 -->
      <template  v-if="isActive === 'Order'">
        <ztable 
          :tableData='orderData'
          :data="orderTableData" 
          :border='false'
          
          :strucs='orderColumns'
          :columns='orderStrucs'
          :height="'100%'"
          :isShow="true"
          @handleExpandChange="handleOrderExpandChange"
          type='expand'
          :isshowOperation="true"
        >
            <template #default="slotData">
            <el-button 
                type="text" 
                size="small" 
                class="operation"
                v-if="slotData.rowData.status === '新建'" 
                @click="handleItemToEdit(slotData.rowData)"
                >编辑</el-button>
              <el-button 
                type="text" 
                size="small" 
                class="operation" 
                @click="handleOrderChargeItem(slotData.rowData)"
                >收费</el-button>
              <el-button 
                type="text" size="small" 
                class="operation" 
                @click="handleCompleteAll(slotData.rowData)"
                v-if="slotData.rowData.status !== '结束'" 
                >完成</el-button>
                <el-button 
                type="text" size="small" 
                class="operation" 
                @click="handleDelItem(slotData.rowData)"
                v-jurisdiction="'customer:order:new:del'"
                >删除</el-button>
            </template>
            <template #insideBtn="scope">
              <el-button 
                type="text" size="small" 
                class="operation" 
                @click="handleComplete(scope.insideData)"
                v-if="scope.insideData.status !== '结束'" 
                >完成</el-button>
              <!-- <el-button type="text" size="small" class="operation" >打印</el-button> -->
            </template>
        </ztable>
      </template>

      <!-- 支付记录 -->
      <template v-if="isActive === 'Payment'">
        <div class="payment"  v-loading="loading">
          <ztable 
            :tableData='payData' 
            :strucs='payColumns'
            :border='false'
            :height="'100%'"
          ></ztable>
        </div>
      </template>

      

      <!-- 收费 -->
      <template v-if="isActive === 'Arrears'">
        <zarrears ref="arrearRef"></zarrears>
      </template>
    </div>
  </div>

  <!-- 账单记录 编辑 -->
  <zdialog title="账单编辑" :width="'48%'" @handleClose="closeDialog" v-model="openBillEdit" :btnData="BillEditBtns">
      <template #body>
        <BillEdit 
          @refreshList="refreshList"
          @closeDiolog="closeDialog"
          :OrderDetail="billOrderDetail" ref="BillEditRef"></BillEdit>
			</template>
    </zdialog>

  <!-- 账单记录子集 -> 编辑 -->
  <zdialog title="收费详情" :width="'48%'" @handleClose="closeDialog" v-model="openBill" :btnData="BillEditBtn">
      <template #body>
        <bill-details
          @refreshList="refreshList"
          @closeDiolog="closeDialog"
          :OrderDetail="billOrderLog" ref="BillDetailRef"
        ></bill-details>
			</template>
    </zdialog>

  <!-- 订单记录 收费 -->
  <zdialog title="收费" :width="'48%'" @handleClose="closeDialog" v-model="openDialogArrear" :btnData="dialogBtnArrear">
      <template #body>
        <arrearpage ref="arrearPageRef" :personID="personID" :orderId="orderId" @refeshList="refeshList"></arrearpage>
			</template>
    </zdialog>

  <!-- 账单记录 退费操作 -->
  <zdialog title="退费" :width="'48%'" @handleClose="closeDialog" v-model="dialogVisible">
      <template #body>
        <zrefundtem :orderId="orderId" @cancelReturn="cancelReturn" @refreshList="refreshList"></zrefundtem>
			</template>
    </zdialog>

    <!-- 打印 -->
  <printHtml class="none" id="print-js" :printList='printList'></printHtml>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed, nextTick, watch, inject, onMounted, watchEffect } from "vue"

import ztree, {NodeChildren} from "../../../components/tree/tree.vue"
import ztable from "../../../components/Table/index.vue"
import zdialog from '@components/dialog/dialog.vue'
import zrefundtem from "./chargeModel/refund.vue"
import useConfgin from '../../../hook/getconfig'
import printHtml from '@components/printHtml/printHtml.vue'
import printJS from 'print-js'

import zarrears from "./chargeModel/arrears.vue"
import arrearpage from "./components/arrearpage.vue"
import {useRouter, useRoute} from "vue-router"

import useRequet, { RespData } from "../../../hook/network"
import { ElMessage, ElMessageBox } from 'element-plus'
import { DataStruc } from '../../../hook/datastruc'
import useRequest from '../../../hook/request'
import BillDetails from './page/billDetails.vue'
import BillEdit from './page/billEdit.vue'

import { delOrderApi, delOrderHasPayApi } from "../../../api/order"


// 收费-》账单记录
const configBillID = 535
// 收费 -》 账单记录嵌套
const configdeepID = 536
// 支付记录
const configPaymentID = 537

// 订单记录
const configIDOrder = 553
// 订单嵌套
const configIDDeepOrder = 554
export default defineComponent({
  name: 'ChargeModel',
  components: {
    ztree,
    ztable,
    zdialog,
    zrefundtem,
    printHtml,
    zarrears,
    arrearpage,
    BillDetails,
    BillEdit
},
  setup(props) {
    const request = useRequet({ path: "" });
    const router = useRouter()
    const route = useRoute()
    const isActive = ref('Bill')
    let id:any = route.params.id

    // 收费
    const list  = reactive({
      checkStatus: ['1', '2', '3', '4'],
      treeData:[],
      // 账单数据
      data: [],
      // 嵌套数据
      tableData: [] as any[],
      // 账单记录数据
      columns: <any>[],
      
      // 嵌套结构
      strucs: <any>[],
      
      // 支付数据
      payData:[],
      // 支付结构
      payColumns: <any>[],
      loading: false,

      // 订单数据
      orderData: [] as any[],
      // 订单嵌套数据
      orderTableData: [] as any[],
      // 订单记录内数据
      orderColumns: <any>[],
      
      // 订单嵌套内部结构
      orderStrucs: <any>[]
    })

    const rowsListBill = useConfgin(configBillID)
    list.columns = rowsListBill.groupDataList.value;
    const rowsListBillDeep = useConfgin(configdeepID)
    list.strucs = rowsListBillDeep.groupDataList.value;
    const rowsListPayment = useConfgin(configPaymentID)
    list.payColumns = rowsListPayment.groupDataList.value;
    const rowListOrder = useConfgin(configIDOrder)
    list.orderColumns = rowListOrder.groupDataList.value;
    const rowListDeepOrder = useConfgin(configIDDeepOrder)
    list.orderStrucs = rowListDeepOrder.groupDataList.value;
    const arrearRef = ref<any>(null)

    watchEffect(() => {
      onMounted(() => {
        getCustomerOrder()
        getCustomerAccount()
        console.log('onMounted')
        if(route.query.to === 'CHARGE') {
          getArrears('Arrears')
        }
      })
    })
    watch(() => route.params.id, (newID) => {
      console.log('watch')
      id = newID
      if(newID) {
        getList()
        getCustomerOrder()
        getCustomerAccount()
        // 支付记录 切换刷新
        getPaymentRecords('Payment')
      }
    })
    
    // const btnPayData = []

    // 订单记录相关
    const getOrderRecords = (val:string) => {
      isActive.value = val
      getList()
    }
    const getList = async() => {
      let params = {
        customerId: id
      }
      let result:any = await useRequest(`pay/order/getCustomerOrderList`, params, 'POST')
      if(result.code !== 0) return ElMessage.error('订单列表获取' + result.msg)
      list.orderData = result.data
    }

    // 展开
    const handleOrderExpandChange = async(row: any) => {
      let id = row.id
      console.log(id, '行ID', row)
      let result:any = await useRequest(`pay/order/getOrderDetail/${id}`, {}, 'GET')
      let index = list.orderData.findIndex((i: any) => i.id === id)
      list.orderTableData[index] = result.data || []

    }

    // 收费 -> 订单记录 -> 编辑
    const handleItemToEdit = (rowData: any) => {
      console.log('去编辑',rowData)
      let { customerId, id } = rowData
      router.push({path:`/allPatientDetails/${customerId}/priceSet`, query: {toDetailId: id, type: 10}})
    }

    // 删除划价单
    const handleDelItem = (rowData: any) => {
      let id = rowData.id
      ElMessageBox.confirm('此操作将永久删除该订单， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async() => {
				let res:any = await delOrderApi({}, rowData.id)
        if(res.code !== 0) return ElMessage.error('操作' + res.msg)
        ElMessage.success('删除成功');
        getList()
			}).catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消',
					});
      })
    }

    
    const arrearPageRef = ref<any>(null)
    const personID = ref()
    // 收费
    const handleOrderChargeItem = async(rowData: any) => {
      console.log('收费', rowData)
      openDialogArrear.value = true;
      let {id, customerId} = rowData;
      personID.value = customerId;
      orderId.value = id;
      await nextTick()
      arrearPageRef.value.getOrderDetails(id)
      
      arrearPageRef.value.getArrCustomerDebtOrder(customerId)
      arrearPageRef.value.getPayMent()
      arrearPageRef.value.getDoctorAndNurse()
    }
    // 全部完成
    const handleCompleteAll = (rowData: any) => {
      let id = rowData.id
      ElMessageBox.confirm('此操作将设置【所有订单项目】为完成, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async() => {
				let result:any = await useRequest(`pay/order/setOrderAllEnd/${id}`, {}, 'POST')
        if(result.code !== 0) return ElMessage.error('操作' + result.msg)
        getList()
			}).catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消',
					});
      })
    }

    // 完成
    const handleComplete = (rowData: any) => {
      let id = rowData.id
      ElMessageBox.confirm(`此操作将设置【订单项目】为完成', 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async() => {
				let result:any = await useRequest(`pay/order/setDetailEnd/${id}`, {}, 'POST')
        if(result.code !== 0) return ElMessage.error('操作' + result.msg)
        getList()
			}).catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消',
					});
      })

    }

    const refeshList = async() => {
      openDialogArrear.value = false
      await getList()
    }



    const getBillRecords= (val: string) => {
      console.debug('账单记录')
      isActive.value = val
      isClickAdd.value = false
      getCustomerOrder()
      getCustomerAccount()

    }

    // 账单记录列表
    const getCustomerOrder = () => {
      list.loading = true
      request.sendRequest({
        address: 'pay/order/getCustomerOrder',
        params: {
          customerId: Number(id)
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          list.data = resp.data || []

          list.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "POST",
      })
    }

    // 得到账单记录账单数据
    const order = reactive({
      balance: 0.00,
      amountOwed: 0.00,
      orderSumMoney: 0.00,
      paySumMoney: 0.00,
      couponsCashCount: 0,
      couponsPackageCount: 0,
      couponsDiscountCount: 0,
      integral: 0
    })
     // 账单记录
    const getCustomerAccount = () => {
      list.loading = true
      request.sendRequest({
        address: `pay/order/getCustomerAccount/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          order.balance = resp.data.balance
          order.amountOwed = resp.data.amountOwed
          order.orderSumMoney = resp.data.orderSumMoney
          order.paySumMoney = resp.data.paySumMoney
          order.couponsCashCount = resp.data.couponsCashCount
          order.couponsPackageCount = resp.data.couponsPackageCount
          order.couponsDiscountCount = resp.data.couponsDiscountCount
          order.integral = resp.data.integral


          list.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      })
    }

    // 订单记录 收费
    const openDialogArrear = ref(false)
    const dialogBtnArrear = [
      {
        name: '取消',
				func: (data:boolean) => {
					console.debug('取消',JSON.parse(JSON.stringify(data)))
          openDialogArrear.value = false
				}
      },
      {
        name: '收费',
				func: async(data:boolean) => {
          console.log('收费确定')
          console.log(arrearPageRef.value)
          await arrearPageRef.value.saveOrder()
          arrearPageRef.value.handleArrears()
				}
      }
    ]

    const orderId = ref()
    // 账单记录 -》 退费
    const handleRefundItem = (rowData: any) => {
      orderId.value = rowData.id
      // 打开弹框
      dialogVisible.value = true
    }
    const dialogVisible = ref(false)
    const closeDialog = () => {
      dialogVisible.value = false
      openDialogArrear.value = false
      openBill.value = false
      openBillEdit.value = false
    }
    const cancelReturn = () => {
      dialogVisible.value = false
    }
    // 退款成功关闭页面刷新列表
    const refreshList = () => {
      getCustomerOrder()
      getCustomerAccount()
    }


    // 账单收费下级 ->  详情
    const openBill = ref(false)
    const billOrderLog = ref()
    const BillDetailRef = ref<any>(null)
    const BillEditBtn = [
      {
        name: '取消',
				func: (data:boolean) => {
          openBill.value = false
				}
      },
      {
        name: '保存',
				func: async(data:boolean) => {
          await nextTick()
          console.log('BillEditBtn')
          BillDetailRef.value.updateOrderInfo()
				}
      }
    ]



    // 展开
    const handleExpandChange = (row: any, expandedRows:any) => {
      let id = row.id
      request.sendRequest({
        address: `pay/order/getOrderPayLogList/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          
          let index = list.data.findIndex((i: any) => i.id === id)
          list.tableData[index] = resp.data
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      })
    }

    const bus: any = inject('$eventBus')
    const openBillEdit = ref(false)
    const BillEditRef = ref<any>(null)
    const BillEditBtns = [
      {
        name: '取消',
				func: (data:boolean) => {
          openBillEdit.value = false
				}
      },
      {
        name: '保存',
				func: async(data:boolean) => {
          await nextTick()
          BillEditRef.value.updateOrderInfo()
          console.log(BillEditRef.value, '点击了保存')
				}
      }
    ]

    const billOrderDetail = ref()
    // 账单得编辑
    const handleEditItem = async(rowData: any) => {

      console.log(rowData, '账单编辑')

      openBillEdit.value = true
      console.log(rowData)
      // 用于查询订单项目
      let id = rowData.id
      billOrderDetail.value = rowData



      bus.emit('goPriceSet', id)
      // router.push({name:'AllPatientDetails', query:{id, type: 10}})
    }

    // 账单记录删除
    const handleDeleteItem = (rowData: any) => {
        let id = rowData.id
        ElMessageBox.confirm('此操作将永久删除该订单， 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async() => {
          let res:any = await delOrderHasPayApi({}, rowData.id)
          if(res.code !== 0) return ElMessage.error('操作' + res.msg)
          ElMessage.success('删除成功');
          refreshList()
        }).catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消',
            });
        })
    }

     // 展开表格内部 编辑(账单编辑)
    const handleInsideEditItem = (rowData: any) => {
      console.debug(rowData)
      openBill.value = true
      billOrderLog.value = rowData
    }

    const getPaymentRecords = (val: string) => {
      console.debug('支付记录')
      isActive.value = val
      isClickAdd.value = false

      list.loading = true
      request.sendRequest({
        address: 'pay/order/getCustomerPayLog',
        params: {
          customerId: Number(id)
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          list.payData = resp.data

          list.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "POST",
      })
    }


    // 存放收费打印数据
    const printList = ref<any[]>([])
    watch(() => printList.value, async(newV) => {
      await nextTick()
      if(newV.length > 0) {
        printJS({
          printable: 'print-js',
          type: 'html',
          scanStyles: false,
          css: 'public/print.css'
        })
      } else {
        ElMessage.warning('暂无打印的数据')
        return false;
      }
    
    })

    const handleOrderPrint = (rowData: any) => {
      console.log(rowData, '打印')
      let id = rowData.id
      request.sendRequest({
        address: `pay/order/getPrintListByOrderId/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          printList.value = resp.data || []

        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      })
    }

    const handlePrint = (rowData: any) => {
      console.log(rowData, '打印')
      let id = rowData.id
      request.sendRequest({
        address: `pay/order/getPrintListByPayLogId/${id}`,
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          printList.value = resp.data || []

        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          
        },
        method: "GET",
      })
    }

    const isClickAdd = ref(false)

    const getArrears = async(val: string) => {
      console.log('点击了收费', id)
      isActive.value = val
      isClickAdd.value = false
      await nextTick()
      arrearRef.value.getPayMent()
      arrearRef.value.getCustomerDebtOrder(id)
      arrearRef.value.getNewOrderList(id)
      arrearRef.value.getCustomerAccountInfo(id)
    }

    return {
      id,
      isClickAdd,
      isActive,
      arrearRef,
      ...toRefs(list),
      ...toRefs(order),
      getBillRecords,
      getOrderRecords,
      getPaymentRecords,
      handleExpandChange,
      handleInsideEditItem,
      handleEditItem,
      handlePrint,
      handleOrderPrint,
      handleRefundItem,

      handleDelItem,
      handleDeleteItem,

      // 打印数据
      printList,

      openDialogArrear,
      dialogBtnArrear,

      openBill,
      BillEditBtn,
      billOrderLog,
      BillDetailRef,

      openBillEdit,
      BillEditBtns,
      BillEditRef,
      billOrderDetail,

      orderId,
      personID,
      dialogVisible,
      closeDialog,
      cancelReturn,
      refreshList,

      getList,
      refeshList,
      handleOrderExpandChange,
      arrearPageRef,
      handleItemToEdit,
      handleOrderChargeItem,
      handleCompleteAll,
      handleComplete,

      getCustomerOrder,
      getCustomerAccount,
      
      getArrears,

      request,
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@style/extend';

.none { display:none;}
.charge {
  min-height: 500px;
  height: calc(100% - 40px);
  .charge-head {
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid $mainColor;
    display: flex;
    .charge-btns {
      padding: 0 20px 0 20px;
    }
    .charge-seach {
      display: flex;
      font-size: $fontSize;
      .seach-lable {
        padding-right: 20px;
      }
    }
    .right-btns {
      flex: 1;
      text-align: right;
      padding-right: 20px;
    }
  }
  .charge-content {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    .table-thead {
      height: 40px;
      line-height: 40px;
      
      // .head-tr {
      //   border-bottom: 1px solid $mainColor;
      //   .head-th {
          
      //   }
      // }
    }
    .border-b {
        width: 100%;
        height: 1px;
        background: $mainColor;
    }


    .content-top {
      // width: 100%;
      height: 120px;
      background: $a2-Color;
      border-radius: $radius-1;
      box-shadow: 1px 1px 3px #ccc;
      display: flex;
      margin: 10px 20px;
      box-sizing: border-box;
      .charge-info {
        display: flex;
        flex-direction: column;
        // width: 100%;
        height: 100%;
        padding: 10px 30px 10px 30px;
        box-sizing: border-box;
        justify-content: center;
        position: relative;
        .info-title {
          @extend .standard-5;
          margin-bottom: 20px;
          
        }
        .info {
          display: flex;
          .info-1 {
            font-size: $fontSize-1;
            font-weight: 600;
            padding-right: 20px;
            & > div:last-child {
              padding-top: 10px;
              font-weight: 600;
            }

            .arrears-num {
              color: #f56c6c;
            }
          }
        }
      }
      .charge-info::before {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 80px;
        background: $mainColor;
        top: 20px;
        right: 0;
      }
    }

    .content-table {
      padding: 20px;
      height: 100%;
    }
   

    .payment {
      // height: calc(100% + 40px);
      height: 100%;
    }



    .arrears {
      border: 2px solid $mainColor;
      border-radius: 4px;
      .arrears-head {
        height: 40px;
        line-height: 40px;
        background: $a2-Color;
        padding-left: 10px;
        @extend .standard-4;
        border-bottom: 2px solid $mainColor;
      }
      .arrears-head > span:last-child {
        color: $a4-Color;
        padding-left: 10px;
      }
      .arrears-content {
        padding: 10px 20px;
      }

      .advance {
        border-top: 2px solid $mainColor;
        .advance-head {
          height: 40px;
          line-height: 40px;
          background: $a2-Color;
          border-bottom: 2px solid $mainColor;
          display: flex;
          @extend .standard-4;
          .head-title {

          }
          .head-title > span{
            padding-left: 10px;
          }
          .head-title > span:nth-child(2) {
            padding-left: 0;
          }
          .head-btn {
            flex: 1;
            text-align: right;
            padding-right: 10px;
            & > i {
              @extend .standard-10;
              padding-left: 10px;
              cursor: pointer;
            }
          }
        }
        .advance-content {
          padding: 20px;
          .group {
            font-size: $fontSize-1;
            display: flex;
            align-items: center;
            background: $a2-Color;
            height: 40px;
            .group-left {
              display: flex;
              align-items: center;
              font-size: $fontSize;
              .label {
                padding: 0 10px;
              }
            }
            .group-right {
              flex: 1;
              text-align: right;
              padding-right: 10px;
              @extend .standard-10;
              & > i {
                cursor: pointer;
              }
            }
          }
        }
      }

      .owe {
        border-top: 2px solid $mainColor;
        .owe-head {
          height: 40px;
          line-height: 40px;
          display: flex;
          padding-left: 10px;
          @extend .standard-4;
          justify-content: space-evenly;
          .head-l {
            & > span:last-child {
              color: $a4-Color;
              padding-left: 10px;
            }
          }
          .head-r {
            flex: 1;
            text-align: right;
            padding-right: 10px;
            & > span:last-child {
              color: green;
              padding-left: 10px;
            }
          }
        }

        .owe-conntent {
          padding: 10px 20px;
        }
      }
    }
    .charge-footer {
      height: 40px;
      line-height: 40px;
      text-align: right;
      padding: 10px 0;
    }
  }
}


ul, li {
  list-style: none;
  margin: 0;
  // padding: 0;
}
</style>